<template>
<a-modal
  ref="approModal"
  @cancel="apprModalClose"
  :visible="apprVisible"
   width="900px" title="审批进度" :footer="null">
      <a-table :columns="columns2" :data-source="data2" class="components-table-demo-nested" :pagination="false">
        <span slot="statusName" slot-scope="statusName">
          <a-tag v-for="status in statusName" :key="status" :color="status !== '已驳回' ? 'green' : 'volcano'">
            {{ status }}
          </a-tag>
        </span>
        <a-table
          slot="expandedRowRender"
          slot-scope="text"
          :columns="innerColumns"
          :data-source="text.details"
          :pagination="false"
        >
        <span slot="statusName" slot-scope="statusName">
           <a-tag v-for="status in statusName" :key="status" :color="status !== '已驳回' ? 'green' : 'volcano'">
            {{ status }}
          </a-tag>
        </span>
        </a-table>
      </a-table>
    </a-modal>
</template>

<script>

const columns2 = [
  {
    title: '审批节点',
    dataIndex: 'id',
    key: 'id',
    align: 'center',
  },
  {
    title: '审批节点状态',
    dataIndex: 'statusName',
    key: 'statusName',
    scopedSlots: { customRender: 'statusName' },
    align: 'center',
  },
  {
    title: '节点审批方式',
    key: 'approverattrName',
    dataIndex: 'approverattrName',
    align: 'center',
  },
]

const innerColumns = [
  { title: '分支审批人', dataIndex: 'userName', key: 'userName',align: 'center', },
  { title: '审批意见', key: 'speech', align: 'center', },
  { title: '审批状态', dataIndex: 'statusName', key: 'statusName',scopedSlots: { customRender: 'statusName' },align: 'center', },
  { title: '审批时间', dataIndex: 'dateTime', key: 'dateTime' ,align: 'center',},
]

  export default {
    name: 'ApproModal',
    props: {
      // 可使用 .sync 修饰符
      apprVisible: {
        type: Boolean,
        default: () => {
          return false
        }
      },
      data2: {
        type: Array,
      },
    },
    data() {
      return {
        columns2,
        innerColumns,
      }
    },
    computed: {

    },
    methods: {
      apprModalClose(){
        this.$emit('apprClose')
      }
    }
  }
</script>

<style lang="less">

</style>